<html>

<head>
    <meta charset="utf-8">
    <title>Z-Nice</title>
    <script src="layui/layui.js"></script>
    <link href="layui/css/layui.css" rel="stylesheet">
    <link href="css/index.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.0/jquery.js"></script>
    <script src="./js/base64.js"></script>
    <script>
        window.onload = function() {
            var list_num = 4 //列数
            var box_height = new Array();
            for (var n = 0; n <= 3; n++) {
                //初始化数组
                box_height[n] = 0;
            }

            var min_list = 0; //最小的列

            $.get("./API/get_img_and_msg.php", function(data) {
                var img_json = $.parseJSON(data);
                img_num = img_json['len'];
                for (var i = 0; i <= img_num - 1; i++) {    
                    //获取图片
                    look_img_url = img_json['url_data'][i]; //图集第一张图作为预览
                    //获取标题
                    var img_title_json = img_json['title_data'][i];
                    //console.log(img_title_json)

                    //添加部分
                    var f_img_box = document.createElement('div'); //创建picture_piece节点
                    f_img_box.className = "picture_piece"; //给节点添加DIV样式
                    f_img_box.id = img_title_json;

                    var img_div = document.createElement('div'); //创建DIV节点
                    img_div.className = "img_box";
                    f_img_box.appendChild(img_div); //把img_div节点添加到img_box中

                    var img_img = document.createElement('img'); //创建IMG节点
                    img_img.src = look_img_url;
                    f_img_box.appendChild(img_img) //图片标签添加进img_box中

                    var img_txt = document.createElement('div'); //创建图片文字节点
                    img_txt.className = "txt_box";

                    var img_a = document.createElement('a');
                    img_a.innerText = img_title_json
                    img_a.href = window.location.protocol + "//" + window.location.host + "/look_album_title.html?album_title=" + Base64.encode(img_title_json);
                    img_a.target = "_blank"
                    img_txt.appendChild(img_a);

                    f_img_box.appendChild(img_txt);

                    var need_add_list = "main_box_" + (i % 4); //要添加的最短的一列
                    //console.log(img_num)
                    var element = document.getElementById(need_add_list); //根
                    //console.log(need_add_list)

                    element.appendChild(f_img_box); //把一堆东西添加进最短的一列

                    box_height[min_list] = box_height[min_list] + $("#" + img_title_json).outerHeight(); //元素的高度更新
                    //console.log(box_height[min_list])
                    for (var m = 0; m <= list_num - 1; m++) {
                        if (box_height[m] < box_height[min_list]) {
                            min_list = m;
                        }
                    }
                    //console.log(min_list);
                }
            })
        }
    </script>
</head>

<body>
    <ul class="layui-nav" lay-filter="">
        <li class="layui-nav-item"><a href="">Z-Nice</a></li>
        <li class="layui-nav-item layui-this"><a href="./">所有图片</a></li>
        <li class="layui-nav-item"><a href="">最新图集</a></li>
        <li class="layui-nav-item">
            <a href="javascript:;">分类浏览</a>
            <dl class="layui-nav-child">
                <!-- 二级菜单 -->
                <!--shooting_team后面的是Base64加密后的参数-->
                <dd><a href="./look_shooting_people.html?shooting_team=5qOu6JCd6LSi5Zui">森萝财团</a></dd>
                <dd><a href="./look_shooting_people.html?shooting_team=6aOO5LmL6aKG5Z+f">风之领域</a></dd>
                <dd><a href="./look_shooting_people.html?shooting_team=5YWU546p5pig55S7">兔玩映画</a></dd>
            </dl>
        </li>
        <li class="layui-nav-item"><a href="https://zhfhz.gitee.io/">关于作者</a></li>
    </ul>
    <div id="main_box_0" class="main_box"></div>
    <div id="main_box_1" class="main_box"></div>
    <div id="main_box_2" class="main_box"></div>
    <div id="main_box_3" class="main_box"></div>
    <script>
        //注意：导航 依赖 element 模块，否则无法进行功能性操作
        layui.use('element', function() {
            var element = layui.element;

            //…
        });
    </script>
</body>

</html>